<template>
	<div>
		<el-tag v-for="tag in value"
				:key = "tag"
				:closable="options.closable"
				:type="options.type"
				:disable-transitions="options['disable-transitions']"
				:hit="options.hit"
				:color="options.color"
				:size="options.size"
				style="margin-right: 10px"
				@close="_close(tag)"
		>{{tag}}</el-tag>
		<el-input v-show="options['show-add'] && inputVisible"
				  v-model="inputValue"
				  ref="saveTagInput"
				  :size="options['input-size']||'small'"
				  :style="options['input-style']||inputStyle"
				  @keypress.enter.native.prevent
				  @keyup.enter.native="handleInputConfirm"
				  @blur="handleInputConfirm"
		></el-input>
		<el-button v-show="options['show-add'] && !inputVisible" type="primary" icon="el-icon-plus" title="添加" circle @click="showInput" :size="options['btn-size']||'mini'"></el-button>
	</div>
</template>

<script>

	import { Message, MessageBox, Notification } from 'element-ui';

    export default {
        name: "base-tag",
		props:{
			options:{
				type: Object,
				required: true,
			},
			value:{
				type: Array,
				required: true,
			}
		},
        data() {
            return {
            	inputVisible: false,
				inputValue: '',
				inputStyle:{
            		width: '90px',
				}
			}
        },
        computed: {},
        methods: {
        	_close(tag){
        		let targetValue = [...this.value]
				targetValue.splice(targetValue.indexOf(tag), 1);
        		this.$emit('input', targetValue);

        		this.$emit('close', tag)
				if(this.options['@close']){
					this.options['@close']();
				}
			},
			showInput(){
        		this.inputVisible=true;
        		this.$nextTick(_=>{
        			this.$refs.saveTagInput.$refs.input.focus();
				})
			},
			handleInputConfirm(){
        		let inputValue = this.inputValue;
        		if(!inputValue){
        			return;
				}
				if(this.value.includes(inputValue)){
					Message({message: `已经存在 ${inputValue}`,type: 'warning',});
					return;
				}
				if(this.options['max-length'] && this.value.length>=this.options['max-length']){
					Message({message: `最多只能添加 ${this.options['max-length']}条`,type: 'warning',});
					return;
				}
        		if(inputValue){
        			let targetValue = [...this.value]
					targetValue.push(inputValue)
					this.$emit('input', targetValue);
				}
				this.inputVisible=false;
        		this.inputValue = '';
			}
		},
        mounted() {

        },
        created() {

        },
    }
</script>

<style scoped>

</style>
